import styles from "./index.less"
import {useEffect, useRef, useState} from "react"
import * as echarts from 'echarts';
import Intercept from "./components/Intercept";
import Attack from "./components/Attack";
import Radar from "./components/Radar";
const MiddleRight = () => {
    const getLastWeekDates = () => {
        const today = new Date();
        const lastWeek = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000);
        const dates = [];
        for (let i = 0; i < 7; i++) {
            const date = new Date(lastWeek.getTime() + i * 24 * 60 * 60 * 1000);
            dates.push(date.toLocaleDateString('en-US', { month: '2-digit', day: '2-digit' }));
        }
        return dates;
    };
    const safeRef = useRef(null)
    const [safeLine, setSafeLine] = useState(getLastWeekDates())
    useEffect(() => {
        const myChart = echarts.init(safeRef.current);
        let option;
        option = {
            xAxis: {
                type: 'category',
                data: safeLine,
                boundaryGap: true,
                axisLine: {
                    show: false
                },
                axisLabel: {
                    //x轴文字的配置
                    show: true,
                    interval: 0,//使x轴文字显示全,
                    margin: 15
                },
                axisTick: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                splitLine: { //多条横线
                    show: true,
                    lineStyle: {
                        color: "rgba(255, 255, 255, 0.3)",
                        type: [10, 10],
                        dashOffset: 5
                    }

                },
            },
            grid: {
                left: "0%",
                top: "10%",
                right: "0%",
                bottom: "32px"
            },
            series: [
                {
                    data: [88, 86, 73, 78, 81, 87, 94],
                    type: 'line',
                    smooth: true,
                    lineStyle: {
                        color: '#73F7F9',
                        width: 2,
                        type: [10, 10],
                        dashOffset: 5
                    },
                    itemStyle: {
                        borderWidth: 3,
                        borderColor: '#73F7F9',
                        color: '#73F7F9'
                    },
                    splitArea: {
                        show: true
                    }
                },
                {
                    name: 'Dynamic Bar',
                    type: 'bar',
                    data: [0, 0, 0, 0, 0, 0, 0],
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(115, 247, 249, 0.1)'
                    }
                }
            ]
        };

        option && myChart.setOption(option);
        window.addEventListener('resize',()=>{
            myChart.resize()
        })
    }, [])
    return (
        <div className={styles.middleRight_container}>
            <div className={styles.middleRight_top}>
                <div className={styles.left}>
                    <div className={styles.left_title}>
                        <img src={require('@/assets/images/sx.png')}/>
                        <div className={styles.describe}>
                            <div className={styles.EnTitle}>Risk situation within 24 hours</div>
                            <div className={styles.ChTitle}>24小时内风险情况</div>
                        </div>
                    </div>
                    <div className={styles.disc}>
                        <div className={styles.box}>
                            <div className={styles.nav}>
                                <div className={styles.outSide}>
                                    <img src={require('@/assets/images/risk.png')} className={styles.risk}/>
                                    <div className={styles.depict}>
                                        <div className={styles.number}>156</div>
                                        <div className={styles.unit}>次</div>
                                    </div>
                                </div>
                                <div className={styles.typeName}>
                                    被攻击
                                </div>
                            </div>
                            <div className={styles.nav}>
                                <div className={styles.outSide}>
                                    <img src={require('@/assets/images/risk.png')} className={styles.risk}/>
                                    <div className={styles.depict}>
                                        <div className={styles.number}>277</div>
                                        <div className={styles.unit}>次</div>
                                    </div>
                                </div>
                                <div className={styles.typeName}>
                                    攻击拦截
                                </div>
                            </div>
                        </div>
                       <div className={styles.box}>
                           <div className={styles.nav}>
                               <div className={styles.outSide}>
                                   <img src={require('@/assets/images/risk.png')} className={styles.risk}/>
                                   <div className={styles.depict}>
                                       <div className={styles.number}>1</div>
                                       <div className={styles.unit}>起</div>
                                   </div>
                               </div>
                               <div className={styles.typeName}>
                                   安全事件
                               </div>
                           </div>
                           <div className={styles.nav}>
                               <div className={styles.outSide}>
                                   <img src={require('@/assets/images/risk.png')} className={styles.risk}/>
                                   <div className={styles.depict}>
                                       <div className={styles.number}>88</div>
                                       <div className={styles.unit}>分</div>
                                   </div>
                               </div>
                               <div className={styles.typeName}>
                                   安全评分
                               </div>
                           </div>

                       </div>
                    </div>
                </div>
                <div className={styles.right}>
                    <div className={styles.right_title}>
                        <img src={require('@/assets/images/sx.png')}/>
                        <div className={styles.describe}>
                            <div className={styles.EnTitle}>Safety scoring trend on the 7th</div>
                            <div className={styles.ChTitle}>7日安全评分趋势</div>
                        </div>
                    </div>
                    <div className={styles.safeLine} ref={safeRef}></div>
                </div>
            </div>
            <div className={styles.middleRight_middle}>
                <Intercept/>
            </div>
            <div className={styles.middleRight_bottom}>
                 <div className={styles.left}>
                     <div className={styles.left_title}>
                         <img src={require('@/assets/images/sx.png')}/>
                         <div className={styles.describe}>
                             <div className={styles.EnTitle}>Risk situation within 24 hours</div>
                             <div className={styles.ChTitle}>7日攻击趋势</div>
                         </div>
                     </div>
                     <div >
                         <Attack/>
                     </div>
                 </div>
                <div className={styles.right}>
                    <div className={styles.right_title}>
                        <img src={require('@/assets/images/sx.png')}/>
                        <div className={styles.describe}>
                            <div className={styles.EnTitle}>Distribution of attack types</div>
                            <div className={styles.ChTitle}>攻击类型分布</div>
                        </div>
                    </div>
                    <div>
                        <Radar/>
                    </div>
                </div>
            </div>
        </div>
    )
}
export default MiddleRight